<template>
  <div class="wdyy">
    <public-com></public-com>
    <div class="flexd box">
      <h1>查询预约</h1>
      <form action="" class="flexd">
        <!-- <div> 日期：<input type="date" name="time" ></div><br>
           <div>预约人证件号：<input type="text" name="id"> </div> <br> -->
        <div>预约人手机号：<input type="tel" name="tel" v-model="phone" /></div>
        <br />
        <div>
          <input type="button" @click="query()" class="submits" value="查询" />
        </div>
      </form>
    </div>
    <footer-com></footer-com>
  </div>
</template>

<script>
import PublicCom from "@/components/PublicCom.vue";
import FooterCom from "@/components/FooterCom.vue";
import axios from "axios";
export default {
  components: {
    PublicCom,
    FooterCom,
  },
  data() {
    return {
      phone: "1",
    };
  },
  rules: {},
  methods: {
    query() {
      this.$router.push({
            name: "dingdan",
            query: {  tel: this.phone },
          }); //JSON.stringify防止数据丢失
    },
  },
};
</script>
<style scoped>
.box {
  width: 60%;
  height: 400px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: rgb(241, 238, 238);
  background-image: url("https://www.pku.edu.cn/Public/static/themes/image/png80.png");
}
.box > h1 {
  margin-bottom: 100px;
}
.submits {
  width: 70px;
  height: 40px;
  line-height: 30px;
  border-radius: 5px;
  border: 0;
  color: cornsilk;
  background-color: #94070a;
}
</style>
